<template>
    <div class="page-wrap">
        <div class="top">
            <img class="bg" mode="widthFix" src="@/assets/index/bg.png" />
            <div class="content">
                <div>积分余额</div>
                <div class="font-num" style="font-size: 25px">{{ balance }}</div>
            </div>
        </div>
        <div class="btn-bottom">
            <div class="btn-detail" @click="navTo('/integralDetail')">积分明细</div>
            <div class="btn-up" @click="navTo('/posList')">积分兑换</div>
            <!-- 之前2.0要求注掉 -->
            <div class="btn-up" @click="navTo('/transferUp')">转让上级</div>
            <!--            <div class="btn-down" @click="navTo('/transferDown')">转让下级</div>-->
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { pointsBal } from '@/api/agent'

export default defineComponent({
    name: 'integral',
    setup() {
        const router = useRouter()
        const state = reactive({
            balance: 0
        })
        const navTo = url => {
            router.push({
                path: url,
                query: {
                    balance: state.balance
                }
            })
        }
        const getPointsBal = () => {
            pointsBal().then(res => {
                state.balance = res.object.balance
            })
        }
        getPointsBal()
        return {
            ...toRefs(state),
            navTo
        }
    }
})
</script>

<style scoped lang="scss">
.page-wrap {
    padding: 10px;
    .top {
        position: relative;
        .bg {
            width: 100%;
        }
        .content {
            padding: 25px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 99;
            color: #ffffff;
            line-height: 30px;
            div {
                font-size: 14px;
                font-family: SimHei;
                font-weight: 400;
                color: #ffffff;
                opacity: 1;
            }
        }
    }

    .btn-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
            width: 152px;
            height: 36px;
            background: #ffffff;
            border: 1px solid #66d6ff;
            opacity: 1;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #66d6ff;
        }
        .btn-detail {
            color: white;
            //box-shadow: rgba(255, 79, 0, 0.24) 0px 3px 8px;
            border: none;
            background-image: linear-gradient(to right, #66d6ff, #66d6ff);
        }
    }
}
</style>
